<template>
  <view class="PinSwiper">
    <swiper autoplay circular @change="onChange">
      <swiper-item v-for="item in bannerData.imgs_" :key="item.seq_">
        <view @tap="go(item)" class="navigator-hover">
          <image :src="item.img_" mode="aspectFill" />
        </view>
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text class="dot" :class="{ active: index === activeIdx }" v-for="(item, index) in bannerData.imgs_"
        :key="item.img_"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { floorsState, bannerItemData } from '@/types/home';

defineProps<{
  bannerData: floorsState
}>()

const go = (item: bannerItemData) => {
  switch (item.target_.type_) {
    case 1:
      uni.navigateTo({ url: `/pages/category/goodsDetail?id=${item.target_.val_}` })
      break;
    case 7:
      uni.navigateTo({ url: `/pages/index/home?templateId=${item.target_.val_}` })
      break;
  }
}

const activeIdx = ref(0)

const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIdx.value = ev.detail.current
}
</script>

<style lang="scss" scoped>
.PinSwiper {
  width: 100%;
  height: 480px;
  position: relative;

  .navigator-hover {
    width: 100%;
    height: 100%;
  }

  .indicator {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 9;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      margin: 0 4px;
      background: rgba(255, 255, 255, 0.5);
    }

    .active {
      background: rgba(255, 255, 255, 1);
    }
  }
}
</style>

